<template>
    <!--组织构建-->
    <div>
      <i-e-button :titleName="ButtonName" ></i-e-button>
      <div class="organization tree-container">
        <el-card class="box-card organization-tree">
          <el-tree :data="data"
                   :props="defaultProps"
                   class="tree filter-tree"
                   default-expand-all
                   :expand-on-click-node="false"
                   @node-click="handleNodeClick">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span>{{ node.label}}
                        <el-tag size="mini" type="success" v-if="data.type_id === 0" >{{organization_type[data.type_id].type}}</el-tag>
                        <el-tag size="mini" type="warning" v-else-if="data.type_id === 1" >{{organization_type[data.type_id].type}}</el-tag>
                        <el-tag size="mini" type="primary" v-else-if="data.type_id === 2" >{{organization_type[data.type_id].type}}</el-tag>
                        <el-tag size="mini" v-else >{{organization_type[data.type_id].type}}</el-tag>
                    </span>
                </span>
          </el-tree>
        </el-card>
        <el-card class="organization-table">
          <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 15px">
            <el-breadcrumb-item v-for="(parentNode,index) in parentNodes" :to="{ path: '/' }">{{parentNode.label}}</el-breadcrumb-item>

            <el-button style="float: right;margin-top: -10px" size="mini" type="primary" icon="el-icon-plus" @click="add(currentNode,currentNode.data)">新增下级部门</el-button>
          </el-breadcrumb>
          <el-table
              :data="tableData"
              border>
            <el-table-column
                type="index"
                label="序号"
                width="50px">
            </el-table-column>
            <el-table-column
                prop="department_code"
                label="部门编码">
            </el-table-column>
            <el-table-column
                prop="label"
                label="部门名称">
            </el-table-column>
            <el-table-column
                prop="abbreviation"
                label="部门简称">
            </el-table-column>
            <el-table-column
                prop="type_id"
                label="部门类型">
              <template slot-scope="scope">
                <el-tag size="mini" type="success" v-if="scope.row.type_id === 0" >{{organization_type[scope.row.type_id].type}}</el-tag>
                <el-tag size="mini" type="warning" v-else-if="scope.row.type_id === 1" >{{organization_type[scope.row.type_id].type}}</el-tag>
                <el-tag size="mini" type="primary" v-else-if="scope.row.type_id === 2" >{{organization_type[scope.row.type_id].type}}</el-tag>
                <el-tag size="mini" v-else >{{organization_type[scope.row.type_id].type}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column
                prop="leader"
                label="部门负责人">
            </el-table-column>
            <el-table-column
                prop="enable"
                label="是否启用">
              <template slot-scope="scope">
                <el-switch
                    v-model="scope.row.enable"
                    active-color="#13ce66"
                    @change="isable(value,scope)"
                    :active-value='1'
                    :inactive-value='0'>
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="update(scope.row,scope.row)">修改</el-button>
                <el-button type="text" size="small" @click="remove(scope.row,scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              class="split-page"
              background
              layout="prev, pager, next"
              :total="10">
          </el-pagination>
        </el-card>
      </div>
        <!--  添加部门    -->
        <el-dialog
                title="添加部门"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="组织名称" prop="parentName">
                    <el-input v-model="ruleForm.parentName" disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="下级组织" prop="label">
                    <el-input v-model="ruleForm.label"></el-input>
                </el-form-item>
                <el-form-item label="组织简称" prop="abbreviation">
                    <el-input v-model="ruleForm.abbreviation"></el-input>
                </el-form-item>
                <el-form-item label="组织类型" prop="type_id">
                    <el-select v-model="ruleForm.type_id" placeholder="请选择组织类型">
                        <el-option v-for="(types,index) in organization_type" :label="types.type" :value="types.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addData('ruleForm')">提交</el-button>
                    <el-button @click="cancel('ruleForm')">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!--  修改部门    -->
        <el-dialog
                title="修改部门"
                :visible.sync="updateDialog"
                width="30%"
                :before-close="handleClose">
            <el-form :model="updateForm" :rules="rules" ref="updateForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="修改名称" prop="parentName">
                    <el-input v-model="updateForm.label"></el-input>
                </el-form-item>
              <el-form-item label="部门编码" prop="parentName">
                <el-input v-model="updateForm.department_code"></el-input>
              </el-form-item>
              <el-form-item label="部门简称" prop="parentName">
                <el-input v-model="updateForm.abbreviation"></el-input>
              </el-form-item>
              <el-form-item label="部门负责人" prop="parentName">
                <el-input v-model="updateForm.leader"></el-input>
              </el-form-item>
                <el-form-item label="组织类型" prop="type_id">
                    <el-select v-model="updateForm.type_id" placeholder="请选择组织类型">
                      <el-option v-for="(types,index) in organization_type" :label="types.type" :value="types.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="updateData('updateForm')">提交</el-button>
                    <el-button @click="updateDialog=false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>

<script>
    import IEButton from "../../components/model/IEButton";
    import TypeTag from "../../components/model/TypeTag";
    export default {
      name: 'Build',
      components: {TypeTag, IEButton},
      data() {
            return {
              updateForm: '',
              ruleForm: {
                  parentName:'',
                  parentId:'',
                  label: '',
                  abbreviation:'',
                  type_id: ''
              },
              defaultProps: {
                  children: 'children',
                  label: 'label'
              },
              ButtonName: {
                importName: '组织导入',
                exportName: '组织导出'
              },
              currentNodeData:'',
              currentNode: {data:'',level:1},
              organization_type:['SBU','SAU','SDU'],
              dialogVisible: false,
              updateDialog:false,
              viewDialog: false,
              data: [],
              tableData: '',
              parentNodes: [],
              initNumber: 1,
              value: true
            };
        },
        methods: {
            initTree() {
              let that = this
              that.$http.post(this.$conf.baseURL + '/queryOrganizationTree', {'id':0})
                  .then(function (res) {
                    that.data = [];
                    that.data.push(res.data.data)
                    if (that.initNumber === 1) {
                      that.parentNodes=that.data
                      that.currentNode.data = that.data[0]
                      console.log(that.data)
                      that.initNumber = 0
                    }
                  })
            },
            isable(value,scope) {
              this.updateForm = scope.row
              this.updateData()
            },
            updatePage () {
              this.initTree()
              this.getTableTitle(this.currentNode)
              this.getOrganization(this.currentNode.data.id)
            },
            getOrganization(id) {
              let that = this
              that.$http.post(this.$conf.baseURL + '/queryOrganizationTree', {'id':id})
                  .then(function (res) {
                    that.tableData = res.data.data.children
                  })
            },
            initOrganizationType() {
              let that = this
              this.$http.post(this.$conf.baseURL + '/queryAllType')
              .then(function (res){
                that.organization_type = res.data
              })
            },
            getTableTitle(node) {
              let parentNode = node
              this.parentNodes = []
              this.parentNodes.push(parentNode.data)
              while (parentNode.level !== 1) {
                parentNode = parentNode.parent
                this.parentNodes.push(parentNode.data)
              }
              this.parentNodes.reverse()
            },
            handleNodeClick(data,node) {
                // 改变上面的标题栏
                this.getTableTitle(node)
                //改变下面的表格内容
                this.getOrganization(node.data.id)
                this.currentNode = node
            },
            add(node,data) {
                this.dialogVisible = true
                this.currentNodeData = data
                this.ruleForm.parentName = data.label
                this.ruleForm.parentId = data.id
            },
            update (node,data) {
                this.updateDialog = true
                this.updateForm = data
            },
            addData(formName) {
                let param = {
                    parent_id:this.ruleForm.parentId,
                    label:this.ruleForm.label,
                    type_id:this.ruleForm.type_id,
                    abbreviation:this.ruleForm.abbreviation
                }
                let that = this
                this.$http.post(this.$conf.baseURL + '/addDepartment',param)
                    .then(function (res) {
                        that.cancel(formName)
                        that.updatePage()
                        that.$message({
                          message: '添加成功',
                          type: 'success'
                        })
                    })
                    .catch(function (res) {
                      that.$message({
                        message: '添加失败',
                        type: 'error'
                      })
                    })
            },
            updateData() {
                let that = this
                this.$http.post(this.$conf.baseURL + '/updateDepartment',this.updateForm)
                    .then(function (res) {
                        that.updateDialog = false
                        that.updatePage()
                        that.$message({
                          message: '修改成功',
                          type: 'success'
                        })
                    })
                    .catch(function() {
                      that.$message({
                        message: '修改失败',
                        type: 'error'
                      })
                    })
            },
            cancel(formName) {
                this.$refs[formName].resetFields();
                this.dialogVisible = false
            },
            remove(node,data) {
                let that = this
                this.$confirm('将删除该组织机构，是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.post(this.$conf.baseURL + '/deleteDepartmentById',{id:data.id})
                        .then(function (res) {
                            that.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                          that.updatePage()
                        })
                        .catch(function (error) {
                            that.$message.error('删除失败');
                        })
                })
            }
        },
        mounted() {
            this.initTree()
            this.getOrganization(0)
        },
        beforeMount() {
          this.initOrganizationType()
        }
    }
</script>

<style lang="scss">

  /* 树形结构节点添加连线 */
  .tree .el-tree-node {
  position: relative;
    padding-left: 5px;
  }

  .tree .el-tree-node__children {
    padding-left: 16px;
  }

  .tree .el-tree-node :last-child:before {
    height: 38px;
  }

  .tree .el-tree > .el-tree-node:before {
    border-left: none;
  }
  .tree-container .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .tree .el-tree-node__children .el-tree-node:before {
    content: '';
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .tree .el-tree-node:after {
    content: '';
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }
  .tree .el-tree-node__expand-icon.is-leaf {
    display: none;
  }

  .tree .el-tree-node:before {
    border-left: 1px dashed #909399;
    bottom: 0px;
    height: 100%;
    top: -26px;
    width: 1px;
  }

  .tree .el-tree-node:after {
    border-top: 1px dashed #909399;
    height: 20px;
    top: 12px;
    width: 24px;
  }
  .tree .custom-tree-node {
    padding-left: 10px;
  }
  /* 树形结构节点添加连线结束 */

    .organization {
      margin-top: 10px;
    }

    .organization-tree {
      float: left;
      width: 25%;
    }
    .organization-table {
      /*margin-left: 15px;*/
      min-width: 74%;
      float: right;
    }
    .split-page {
      margin-top: 15px;
      float: right;
    }

    .organization-table,
    .organization-tree {
      height: 620px;
    }

    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
</style>

